<template>
  <view class="MapComp">
    园区名
    <map
      name=""
      id="mapId"
      class="MapComp-map"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
    >
      <cover-view slot="callout">
        <cover-view marker-id="1">
          <cover-view class="bubble-container">
            <cover-view class="bubble">
              <cover-view class="info">
                <cover-view class="text_1">位置信息</cover-view>
                <cover-view class="text_2">位置信息</cover-view>
              </cover-view>
              <cover-image
                class="fly"
                src="/static/icon_fly_01.png"
                mode="aspectFill"
              ></cover-image>
            </cover-view>
            <cover-view class="triangle"></cover-view>
          </cover-view>
        </cover-view>
      </cover-view>
    </map>
    <view class="MapComp-list">
      <view
        class="MapComp-list-item"
        :class="{ 'MapComp-active': i === tabIndex }"
        v-for="(item, i) in tabs"
        :key="i"
        @click="getPeripheryInfo(i)"
      >
        <view class="MapComp-text">{{ item }}</view>
        <view class="MapComp-line"></view>
      </view>
    </view>
  </view>
</template>

<script>
const QQMapWX = require("@/utils/qqmap-wx-jssdk.js");
export default {
  name: "Map",
  data() {
    return {
      mapCtx: null,
      qqmapsdk: null,
      latitude: 39.909,
      longitude: 116.39742,
      covers: [
        {
          latitude: 39.909,
          longitude: 116.39742,
        },
        {
          latitude: 39.9,
          longitude: 116.39,
        },
      ],
      location: null,
      tempMarkers: [
        {
          id: 1,
          latitude: 23.120832,
          longitude: 113.390163,
          iconPath: "",
          width: 30,
          height: 30,
          customCallout: {
            display: "ALWAYS",
          },
        },
      ],
      markers: [
        {
          id: 0,
          latitude: 23.120832,
          longitude: 113.390163,
          iconPath: "/static/icon_map_mark.png",
          width: 30,
          height: 30,
          customCallout: {
            display: "ALWAYS",
          },
        },
      ],
      tabs: ["交通", "医疗", "教育", "餐饮", "金融", "购物"],
      tabIndex: 0,
    };
  },
  created() {
    // 实例化API核心类
    this.qqmapsdk = new QQMapWX({
      key: "Q7ZBZ-RWG6R-I4HWZ-WNEDD-IN42H-HSFT7",
    });
    this.mapCtx = uni.createMapContext("mapId", this);
  },
  methods: {
    //逆向地址解析
    getAddress(latitude, longitude) {
      uni.showToast({
        title: "定位中...",
        icon: "none",
      });
      this.qqmapsdk.reverseGeocoder({
        //SDK调用
        location: { latitude, longitude },
        success: (res) => {
          let { result } = res;
          let { address_component, formatted_addresses } = result;
          this.location = {
            province: address_component.province,
            city: address_component.city,
            regoin: address_component.district,
            street: address_component.street,
            address: formatted_addresses.recommend,
          };
        },
        fail: (res) => {},
        complete: (res) => {
          utils.clearLoadingToast();
        },
      });
    },
    // 获取周边位置
    getPeripheryInfo(index) {
      this.tabIndex = index;
      let { latitude, longitude, tabs, tempMarkers } = this;
      let location = `${latitude},${longitude}`;
      const _this = this;
      this.qqmapsdk.search({
        keyword: tabs[index], //搜索关键词
        location, //设置周边搜索中心点
        success(res) {
          //搜索成功后的回调
          let marks = Array.from(tempMarkers);
          for (let i = 0; i < res.data.length; i++) {
            marks.push({
              // 获取返回结果，放到mks数组中
              title: res.data[i].title,
              id: i,
              latitude: res.data[i].location.lat,
              longitude: res.data[i].location.lng,
              iconPath: "/static/icon_map_mark.png", //图标路径
              width: 20,
              height: 20,
            });
          }
          _this.mapCtx.addMarkers({
            markers: marks,
            clear: true,
            success(res) {
              console.log(res);
            },
          });
          _this.markers = marks;
        },
        fail(res) {
          console.log(res);
        },
        complete(res) {
          // console.log(res);
        },
      });
    },
    // 获取当前位置
    getLocation() {
      const _this = this;
      uni.authorize({
        scope: "scope.userLocation",
        success() {
          uni.getLocation({
            type: "gcj02",
            success: function (res) {
              const { latitude, longitude } = res;
              _this.latitude = latitude;
              _this.longitude = longitude;
              _this.markers[0].latitude = latitude;
              _this.markers[0].longitude = longitude;
              this.getAddress(latitude, longitude);
              uni.setStorageSync("location", {
                latitude,
                longitude,
              });
            },
          });
        },
      });
    },
  },
};
</script>

<style scoped>
.MapComp {
  width: 100%;
  height: 562rpx;
  position: relative;
  background: #f7f7f7;
}

.MapComp .MapComp-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.MapComp .MapComp-list {
  position: absolute;
  top: 32rpx;
  left: 50%;
  transform: translate(-50%, 0);
  width: 640rpx;
  height: 88rpx;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.06);
  border-radius: 16rpx;
  display: flex;
  align-items: center;
}

.MapComp .MapComp-list .MapComp-list-item {
  flex: 1;
  height: 88rpx;
  display: flex;
  align-items: center;
  /* flex-direction: column; */
  justify-content: center;
}

.MapComp .MapComp-list .MapComp-list-item .MapComp-text {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333444;
}

.MapComp .MapComp-list .MapComp-list-item.MapComp-active {
  flex-direction: column;
}

.MapComp .MapComp-list .MapComp-list-item.MapComp-active .MapComp-line {
  position: absolute;
  width: 40rpx;
  height: 6rpx;
  background: #2489ff;
  border-radius: 104rpx;
  bottom: 0;
  /* margin-top: 20rpx; */
}

.bubble-container {
  display: flex;
  width: 412rpx;
  height: 142rpx;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bubble-container .bubble {
  width: 100%;
  height: 130rpx;
  background: #ffffff;
  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12rpx;
  /* padding: 0 16rpx; */
}

.bubble-container .bubble .info {
  margin-right: 104rpx;
}

.bubble-container .bubble .info .text_1 {
  max-width: 192rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333444;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  white-space: nowrap;
}

.bubble-container .bubble .info .text_2 {
  max-width: 194rpx;
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999aaa;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  white-space: nowrap;
}

.bubble-container .bubble .fly {
  width: 60rpx;
  height: 60rpx;
}

.bubble-container .triangle {
  width: 0;
  height: 0;
  border-left: 12rpx solid transparent;
  border-right: 12rpx solid transparent;
  border-top: 12rpx solid #fff;
}
</style>
